<!DOCTYPE html>
<html lang="zh-CN" class="loading">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>学习react-router之基本路由 - Skyone-Blog</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="React,Node.js,react-router,JavaScript,"> 
    <meta name="description" content="Skyone技术博客,react-router是react生态中的重要部分，本文介绍了react的基本路由方法。"> 
    <meta name="author" content="王志伟"> 
    <link rel="alternative" href="atom.xml" title="Skyone-Blog" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

    
<link rel="stylesheet" href="/css/diaspora.css">

    <!-- 看板娘
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="/live2d-widget/autoload.js"></script>
    -->
    <!-- MD5 -->
    <script src="/js/md5.min.js"></script>
    <!-- MathJax -->
    
        <script type="text/x-mathjax-config">
        (function () {
            let target = document.getElementsByClassName("content")[0];
            MathJax.Hub.Config({
                tex2jax: {
                    inlineMath:  [ ["$", "$"] ],
                    displayMath: [ ["$$","$$"] ],
                    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
                    ignoreClass:"class1"
                }
            });
            MathJax.Hub.Queue(["Typeset",MathJax.Hub,target]);
        })();
    </script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    
<meta name="generator" content="Hexo 5.3.0"></head>

<body class="loading">
    <span id="config-title" style="display:none">Skyone-Blog</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://www.skyone.host"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">学习react-router之基本路由</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">学习react-router之基本路由</h1>
        <div class="stuff">
            <span>八月 10, 2021</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/Node-js/" rel="tag">Node.js</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/React/" rel="tag">React</a></li></ul>


        </div>
        <div class="content markdown">
            <blockquote>
<p>注意：这里的React-Router适用于<code>&quot;react-router-dom&quot;: &quot;^5.2.0&quot;</code></p>
<p>代码仓库<a target="_blank" rel="noopener" href="https://github.com/skyone-wzw/learn-react-router">skyone-wzw/learn-react-router</a></p>
<p>同时注意一下，<code>react-router-dom</code>依靠<code>react-router</code>，也就是说安装了前者就不需要安装后者了</p>
</blockquote>
<blockquote>
<p>运行环境：</p>
<p>OS：<code>windows10</code></p>
<p>node：<code>v14.17.3</code></p>
<p>IDE：<code>webstorn</code></p>
<p>包管理器：<code>yarn</code></p>
</blockquote>
<p>这次我们的目标是创建一个拥有简单路由的页面</p>
<p>包含三个链接和一个框框，要求在不产生新的HTTP请求的情况下加载三个普通页面和一个404页面，三个链接不变，框框中显示页面的内容。</p>
<img src="https://tc.skyone.host/blog/post/%E5%AD%A6%E4%B9%A0react-router%E4%B9%8B%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1/target.png" alt="target" style="zoom:50%;" />

<h2 id="创建React工程"><a href="#创建React工程" class="headerlink" title="创建React工程"></a>创建React工程</h2><h3 id="初始化工程"><a href="#初始化工程" class="headerlink" title="初始化工程"></a>初始化工程</h3><p>为了省事，直接使用<code>create-react-app</code>创建工程吧，</p>
<p>不需要安装任何前置组件，直接在你想要创建工程的文件夹运行</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx create-react-app $&#123;你工程的名字&#125;</span><br></pre></td></tr></table></figure>
<p>目录结构就不多做介绍了，相比都知道，即使不知道多半也能猜出来</p>
<h3 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h3><p>这里我安装两个库</p>
<p><code>@types/react</code></p>
<p>这个库用于辅助代码提示</p>
<p><code>react-router-dom</code></p>
<p>本文的主题啦，react的路由库</p>
<h3 id="尝试运行"><a href="#尝试运行" class="headerlink" title="尝试运行"></a>尝试运行</h3><p>以下三个命令几乎是最常用的了，这里指出，后面不再说明</p>
<ul>
<li><p>运行dev版</p>
<p>  这样运行会监听文件修改并热更新，还会提供错误提示，如果浏览器安装了react插件，还能在检查元素中快速调试。</p>
</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn start</span><br><span class="line"><span class="meta">#</span><span class="bash"> 或</span></span><br><span class="line">npm start</span><br></pre></td></tr></table></figure>
<ul>
<li><p>编译</p>
<p>  把代码编译成可以直接在浏览器上运行的代码</p>
</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn build</span><br><span class="line"><span class="meta">#</span><span class="bash"> 或</span></span><br><span class="line">yarn build</span><br></pre></td></tr></table></figure>
<ul>
<li><p>运行简单的静态服务器</p>
<p>  编译代码后可以看看是否运行正常</p>
</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">server build</span><br></pre></td></tr></table></figure>
<p>这里我们运行<code>yarn start</code></p>
<p>浏览器弹出<code>http://localhost:3000</code></p>
<p><img src="https://tc.skyone.host/blog/post/%E5%AD%A6%E4%B9%A0react-router%E4%B9%8B%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1/create-react-app.png" alt="create-react-app"></p>
<h2 id="编写代码"><a href="#编写代码" class="headerlink" title="编写代码"></a>编写代码</h2><p>先把<code>src</code>目录的文件删了吧</p>
<h3 id="index-js入口函数"><a href="#index-js入口函数" class="headerlink" title="index.js入口函数"></a><code>index.js</code>入口函数</h3><p>然后我们创建应用的入口<code>src/index.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">&#x27;react-dom&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&quot;./App&quot;</span>;</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">    &lt;App/&gt;,</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">&#x27;root&#x27;</span>)</span><br><span class="line">);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>很简单嘛，就是把<code>App</code>加载到<code>#root</code>元素里嘛</p>
<h3 id="App组件"><a href="#App组件" class="headerlink" title="App组件"></a><code>App</code>组件</h3><p>创建<code>App</code>组件<code>src/App.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Link&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./default.css&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/list&quot;</span>&gt;</span>列表页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/detail&quot;</span>&gt;</span>详情页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/404&quot;</span>&gt;</span>404<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                &lt;/ul&gt;</span><br><span class="line">                &lt;div className=<span class="string">&quot;box&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>从这里重点就要开始咯</p>
<p><code>App.jsx</code>中的内容将是我们显示在主页的内容，包含三个链接和一个框框，当然这个类可以用函数代替</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">        	&lt;ul&gt;</span><br><span class="line">            	&lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/list&quot;</span>&gt;</span>列表页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/detail&quot;</span>&gt;</span>详情页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/404&quot;</span>&gt;</span>404<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">            &lt;/ul&gt;</span><br><span class="line">            &lt;div className=<span class="string">&quot;box&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>但是<code>rcc</code>这个快捷指令多省事，干嘛不用呐？</p>
<p><code>Link</code>就相当于是HTML中的<code>a</code>标签，完成页面的不刷新加载</p>
<p>我们再给<code>box</code>写一个样式吧，实验嘛，一切从俭<del>好吧，懒字当头万事难</del></p>
<p>创建<code>src/default.css</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid black;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.notfound</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这个<code>notfound</code>用于404的图片，这里先写出来</p>
<h3 id="List和Detail组件"><a href="#List和Detail组件" class="headerlink" title="List和Detail组件"></a><code>List</code>和<code>Detail</code>组件</h3><p><code>List</code>组件用于渲染<code>/list</code>页面</p>
<p>上代码，<code>src/List.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">List</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;h2&gt;列表页&lt;/h2&gt;</span><br><span class="line">                &lt;button onClick=&#123;<span class="literal">null</span>&#125;&gt;查看详情&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> List;</span><br></pre></td></tr></table></figure>
<p>这个跳转按钮我们先不实现它的功能，先把要显示的东西写出来</p>
<p><code>Detail</code>组件用于渲染<code>/detail</code>页面</p>
<p><code>src/Detail.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Detail</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;h2&gt;详情页&lt;/h2&gt;</span><br><span class="line">                &lt;button onClick=&#123;<span class="literal">null</span>&#125;&gt;返回列表&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Detail;</span><br></pre></td></tr></table></figure>
<h3 id="404页面"><a href="#404页面" class="headerlink" title="404页面"></a>404页面</h3><p>很简单，和上面的没有什么区别</p>
<p>只是导入了一个<code>404.svg</code>的图片而已，<strong>必须这样导入</strong>，只有这样<code>webpack</code>才能找到资源并打包</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Link&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> ErrSrc <span class="keyword">from</span> <span class="string">&quot;./assets/404.svg&quot;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./default.css&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">NotFound</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;Link to=<span class="string">&quot;/&quot;</span>&gt;</span><br><span class="line">                &lt;img src=&#123;ErrSrc&#125; className=<span class="string">&quot;notfound&quot;</span> alt=<span class="string">&quot;404 Not Found!&quot;</span>/&gt;</span><br><span class="line">            &lt;/Link&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> NotFound;</span><br></pre></td></tr></table></figure>
<h3 id="基本路由"><a href="#基本路由" class="headerlink" title="基本路由"></a>基本路由</h3><p>路由文件一般只写路由逻辑，而不包含其他东西</p>
<p><code>src/router/BaseRouter.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;BrowserRouter, Switch, Route&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> AppRouter <span class="keyword">from</span> <span class="string">&quot;./AppRouter&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">BaseRouter</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;BrowserRouter&gt;</span><br><span class="line">                &lt;Switch&gt;</span><br><span class="line">                    &lt;Route path=<span class="string">&quot;/&quot;</span> component=&#123;AppRouter&#125;/&gt;</span><br><span class="line">                &lt;/Switch&gt;</span><br><span class="line">            &lt;/BrowserRouter&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> BaseRouter;</span><br></pre></td></tr></table></figure>
<h4 id="路由方式"><a href="#路由方式" class="headerlink" title="路由方式"></a>路由方式</h4><p><code>react-router</code>有三种路由方法：</p>
<ul>
<li><code>HashHistory</code></li>
<li><code>BrowserRouter</code></li>
<li><code>MemoryHistory</code></li>
</ul>
<p>官方建议使用<code>BrowserRouter</code>，原因是：好看。。。</p>
<p>至于三者有什么区别：</p>
<p><code>BrowserRouter</code>就是浏览器原生的路由，例如<code>http://localhost:3000/list</code>就是<code>/list</code></p>
<p><code>HashHistory</code>则使用URL的hash值作为路由，例如<code>http://localhost:3000/#/list</code>表示<code>/list</code>，注意不要搞混了，<code>URL</code>的<code>PATH</code>到<code>/</code>就结束了，<code>#</code>后面的表示哈希（当然查询字符串<code>?</code>除外）</p>
<p><code>MemoryHistory</code>暂时没学，不懂</p>
<h4 id="使用路由"><a href="#使用路由" class="headerlink" title="使用路由"></a>使用路由</h4><p>对于React-Router4，要使用路由，必须先选择路由方式</p>
<p>很简单，使用指定组件包住需要路由的最顶层目录（一般直接是根目录）就可以了，例如下面这个结构</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;BrowserRouter&gt;</span><br><span class="line">    &lt;Switch&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/&quot;</span> component=&#123;App&#125;/&gt;</span><br><span class="line">    &lt;/Switch&gt;</span><br><span class="line">&lt;/BrowserRouter&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>最外层的<code>BrowserRouter</code>定义里面的元素全部使用<code>Browser</code>路由，当然其他两种路由也是一样的道理。同时要注意，该组件的子元素无论如何嵌套，都不需要在使用该组件了。</li>
<li><code>Route</code>就像是判断URL是否符合条件，只有符合<code>path</code>条件的才会渲染<code>component</code>里的元素</li>
<li><code>Switch</code>组件包括的<code>Route</code>或其他组件只会渲染<strong>符合条件的第一个</strong>，后面的即使符合条件也<strong>不会渲染</strong>，值得注意的是，<code>Switch</code>里面不一定只能包含<code>Route</code>，也可以包含其他组件，但是其他组件没有符合条件一说，所以只要前面没有符合条件的<code>Route</code>就一定会渲染，当然后面的就不会渲染了，<code>Switch</code>只渲染一个子元素</li>
<li><code>Route</code>的<code>exact</code>属性表示精确匹配，因为在<strong>同级组件</strong>下，不添加<code>exact</code>属性会导致<code>path=&quot;/&quot;</code>会匹配到所有<code>/</code>开头的路由。例如：在不加<code>exact</code>属性的条件下<code>path=&quot;/&quot;</code>会匹配到<code>/abc</code>，<code>path=&quot;/asd&quot;</code>会匹配到<code>/asd123</code>；而精确匹配下<code>exact path=&quot;/&quot;</code>只能匹配到<code>/</code>，<code>exact path=&quot;/asd&quot;</code>只能匹配到<code>/asd</code></li>
</ul>
<p>回头看我们写的代码，很简单，就是匹配到<code>/</code>开头的URL就运行<code>AppRouter</code>，<del>额，似乎有点多此一举。。。不过算了。</del></p>
<h3 id="AppRouter组件"><a href="#AppRouter组件" class="headerlink" title="AppRouter组件"></a><code>AppRouter</code>组件</h3><p><code>AppRouter</code>是一个子路由，里面控制我们的三个URL<code>/</code>、<code>/list</code>、<code>/detail</code>和特殊的<code>/404</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Route, Switch, Redirect&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&quot;../App&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> List <span class="keyword">from</span> <span class="string">&quot;../List&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> Detail <span class="keyword">from</span> <span class="string">&quot;../Detail&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> NotFound <span class="keyword">from</span> <span class="string">&quot;../NotFound&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">AppRouter</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;App&gt;</span><br><span class="line">                &lt;Switch&gt;</span><br><span class="line">                    &lt;Route exact path=<span class="string">&quot;/&quot;</span> component=&#123;<span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>Index<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span>&#125;/&gt;</span><br><span class="line">                    &lt;Route exact path=<span class="string">&quot;/list&quot;</span> component=&#123;List&#125;/&gt;</span><br><span class="line">                    &lt;Route exact path=<span class="string">&quot;/detail&quot;</span> component=&#123;Detail&#125;/&gt;</span><br><span class="line">                    &lt;Route exact path=<span class="string">&quot;/404&quot;</span> component=&#123;NotFound&#125;/&gt;</span><br><span class="line">                    &lt;Redirect to=<span class="string">&quot;/404&quot;</span>/&gt;</span><br><span class="line">                &lt;/Switch&gt;</span><br><span class="line">            &lt;/App&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> AppRouter;</span><br></pre></td></tr></table></figure>
<p>我们在<code>App</code>组件里放了个组件，读读这段代码，看看你理解<code>Switch</code>没有</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;App&gt;</span><br><span class="line">    &lt;Switch&gt;</span><br><span class="line">        &lt;Route exact path=<span class="string">&quot;/&quot;</span> component=&#123;<span class="function">() =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>Index<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span>&#125;/&gt;</span><br><span class="line">        &lt;Route exact path=<span class="string">&quot;/list&quot;</span> component=&#123;List&#125;/&gt;</span><br><span class="line">        &lt;Route exact path=<span class="string">&quot;/detail&quot;</span> component=&#123;Detail&#125;/&gt;</span><br><span class="line">        &lt;Route exact path=<span class="string">&quot;/404&quot;</span> component=&#123;NotFound&#125;/&gt;</span><br><span class="line">        &lt;Redirect to=<span class="string">&quot;/404&quot;</span>/&gt;</span><br><span class="line">    &lt;/Switch&gt;</span><br><span class="line">&lt;/App&gt;</span><br></pre></td></tr></table></figure>
<p>这段代码表示：</p>
<p>如果<code>/</code>就渲染一个<code>h2</code>标签</p>
<p>如果<code>/list</code>就渲染<code>List</code>组件</p>
<p>如果<code>/detial</code>就渲染<code>Detial</code>组件</p>
<p>如果<code>/404</code>就渲染<code>NotFound</code>组件</p>
<p>如果都不匹配，才渲染<code>Redirect</code>组件，跳转到<code>/404</code></p>
<p><strong><code>Switch</code>只渲染一个组件！</strong></p>
<h4 id="修改App组件"><a href="#修改App组件" class="headerlink" title="修改App组件"></a>修改<code>App</code>组件</h4><p>由于<code> App</code>组件有子元素，我们要指定子元素显示的位置，稍稍修改<code>src/App.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Link&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;./default.css&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;ul&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/list&quot;</span>&gt;</span>列表页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/detail&quot;</span>&gt;</span>详情页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                    &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/404&quot;</span>&gt;</span>404<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span>&lt;/li&gt;</span><br><span class="line">                &lt;/ul&gt;</span><br><span class="line">                &lt;div className=<span class="string">&quot;box&quot;</span>&gt;&#123;<span class="built_in">this</span>.props.children&#125;&lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure>
<p><code>this.props.children</code>即代表子元素</p>
<p>好啦，<code>Ctrl + S</code>保存，代码会自动被渲染，打开浏览器看看吧</p>
<p>虽然按钮功能还没有实现，但链接已经可以点了</p>
<h3 id="实现按钮跳转"><a href="#实现按钮跳转" class="headerlink" title="实现按钮跳转"></a>实现按钮跳转</h3><p>这里我只演示如何修改<code>List</code>，<code>Detail</code>自己改</p>
<p><code>src/List.jsx</code></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">List</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(props);</span><br><span class="line">        <span class="built_in">this</span>.toDetail = <span class="built_in">this</span>.toDetail.bind(<span class="built_in">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">toDetail</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.props.history.push(<span class="string">&quot;/detail&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;h2&gt;列表页&lt;/h2&gt;</span><br><span class="line">                &lt;button onClick=&#123;<span class="built_in">this</span>.toDetail&#125;&gt;查看详情&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> List;</span><br></pre></td></tr></table></figure>
<p><code>this.props.history.push(&quot;/detail&quot;);</code>这一句表示跳转到<code>/detail</code>，和点击<code>Link</code>组件跳转是一模一样的。同样的方法还有</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.props.history.push(path: Path, state?: HistoryLocationState): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.push(location: LocationDescriptor&lt;HistoryLocationState&gt;): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.replace(path: Path, state?: HistoryLocationState): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.replace(location: LocationDescriptor&lt;HistoryLocationState&gt;): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.go(n: <span class="built_in">number</span>): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.goBack(): <span class="built_in">void</span>;</span><br><span class="line"><span class="built_in">this</span>.props.history.goForward(): <span class="built_in">void</span>;</span><br></pre></td></tr></table></figure>
<p>看名字都能猜出来怎么用吧~~~~</p>
<p>基本和DOM的<code>history</code>差不多的</p>
<h2 id="编译-amp-amp-部署"><a href="#编译-amp-amp-部署" class="headerlink" title="编译&amp;&amp;部署"></a>编译&amp;&amp;部署</h2><p>编译很简单，一行命令</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn build</span><br></pre></td></tr></table></figure>
<p>至于部署嘛，要注意一下：</p>
<p>由于路由由React实现，页面本质上只有<code>index.html</code>，所以<code>nginx</code>配置文件需要少许修改，例如</p>
<p><code>/etc/nginx/conf.d/test.conf</code></p>
<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">server</span> &#123;</span><br><span class="line">    <span class="attribute">listen</span> <span class="number">80</span>;</span><br><span class="line">    <span class="attribute">server_name</span> localhost;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">location</span> / &#123;</span><br><span class="line">        <span class="attribute">root</span>            <span class="string">&quot;F://temp//nginx_root&quot;</span>;</span><br><span class="line">        <span class="attribute">index</span>           index.html index.htm index.php;</span><br><span class="line">        <span class="attribute">try_files</span> $uri  /index.html;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<img src="https://tc.skyone.host/blog/post/%E5%AD%A6%E4%B9%A0react-router%E4%B9%8B%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1/target.png" alt="target" style="zoom:50%;" />

<p>想要向我的一样在本地实现SSL小绿锁也不是很难，下一篇文章我会写怎么配置的。</p>
<p>【完】</p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title='0' data-url='https://tc.skyone.host/blog/music/%E6%B4%9B%E5%A4%A9%E4%BE%9D%20-%20%E5%A4%9C%E8%88%AA%E6%98%9F.flac'></li>
                        
                    
                        
                            <li title='1' data-url='https://tc.skyone.host/blog/music/%E6%B4%9B%E5%A4%A9%E4%BE%9D%20-%20%E8%8C%89%E8%8E%89%E8%8A%B1.mp3'></li>
                        
                    
                        
                            <li title='2' data-url='https://tc.skyone.host/blog/music/%E8%B5%A4%E7%BE%BD%20-%20%E4%B8%87%E5%8F%A4%E7%94%9F%E9%A6%99.flac'></li>
                        
                    
                        
                            <li title='3' data-url='https://tc.skyone.host/blog/music/%E6%B4%9B%E5%A4%A9%E4%BE%9D%20-%20%E4%B8%BA%E8%B0%81%E8%80%8C%E4%B8%BA.mp3'></li>
                        
                    
                        
                            <li title='4' data-url='https://tc.skyone.host/blog/music/%E4%B9%90%E6%AD%A3%E7%BB%AB%20-%20Faded.mp3'></li>
                        
                    
                        
                            <li title='5' data-url='https://tc.skyone.host/blog/music/bilibili2018%20-%20%E8%87%B3%E5%B0%8A%E9%A9%AC%E7%94%B2.flac'></li>
                        
                    
                </ul>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='true'
        data-ae='true'
        data-ci='d5e197ef955b7f3268e5'
        data-cs='7d4feed7a179ad28943b0865b7970814073145ad'
        data-r='blog-gitalk'
        data-o='skyone-wzw'
        data-a='skyone-wzw'
        data-d='false'
    >查看评论</div>


    </div>
    
        <div class='side'>
			<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAReact%E5%B7%A5%E7%A8%8B"><span class="toc-number">1.</span> <span class="toc-text">创建React工程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E5%B7%A5%E7%A8%8B"><span class="toc-number">1.1.</span> <span class="toc-text">初始化工程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">1.2.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%9D%E8%AF%95%E8%BF%90%E8%A1%8C"><span class="toc-number">1.3.</span> <span class="toc-text">尝试运行</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E4%BB%A3%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">编写代码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#index-js%E5%85%A5%E5%8F%A3%E5%87%BD%E6%95%B0"><span class="toc-number">2.1.</span> <span class="toc-text">index.js入口函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#App%E7%BB%84%E4%BB%B6"><span class="toc-number">2.2.</span> <span class="toc-text">App组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#List%E5%92%8CDetail%E7%BB%84%E4%BB%B6"><span class="toc-number">2.3.</span> <span class="toc-text">List和Detail组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#404%E9%A1%B5%E9%9D%A2"><span class="toc-number">2.4.</span> <span class="toc-text">404页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E8%B7%AF%E7%94%B1"><span class="toc-number">2.5.</span> <span class="toc-text">基本路由</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E6%96%B9%E5%BC%8F"><span class="toc-number">2.5.1.</span> <span class="toc-text">路由方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%B7%AF%E7%94%B1"><span class="toc-number">2.5.2.</span> <span class="toc-text">使用路由</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#AppRouter%E7%BB%84%E4%BB%B6"><span class="toc-number">2.6.</span> <span class="toc-text">AppRouter组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9App%E7%BB%84%E4%BB%B6"><span class="toc-number">2.6.1.</span> <span class="toc-text">修改App组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E6%8C%89%E9%92%AE%E8%B7%B3%E8%BD%AC"><span class="toc-number">2.7.</span> <span class="toc-text">实现按钮跳转</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E8%AF%91-amp-amp-%E9%83%A8%E7%BD%B2"><span class="toc-number">3.</span> <span class="toc-text">编译&amp;&amp;部署</span></a></li></ol>	
        </div>
    
</div>


    </div>
</div>
</body>

<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/typed.js"></script>
<script src="/js/skyone.min.js"></script>


<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">


<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>




</html>
